import React, { memo, useEffect, useState } from 'react';
import { Select, Input, message } from 'antd';
import styled from './index.less';

const typeKey = {
  just: 'justMap',
  gaode: 'gaode',
};
const { Option } = Select;
function SelectMap({ value, onChange }) {
  const [inputUrl, setInputUrl] = useState('');
  const [selectValue, setSelectValue] = useState('');
  const [gaodeKey, setGaodeKey] = useState('');
  const [gaodeJsCode, setGaodeJsCode] = useState('');
  const [gaodeStyle, setGaodeStyle] = useState('');

  // 验证just地址有效性
  const verifyJust = (inputValue) => inputValue.includes('/justserver/studio/map/view/');
  // 处理Just文本框内容
  const justInputChange = (v) => {
    const inputV = v.target.value;
    if (inputV && inputV.indexOf('http') !== -1 && verifyJust(inputV)) {
      onChange(inputV);
    } else {
      message.error('不是有效Just服务地址，请重新输入');
    }
    setInputUrl(v.target.value);
  };

  // 验证高德地址有效性
  const verifyGaode = (inputValue) => inputValue.includes('amap://styles/');
  // 打开高德帮助地址
  const openGaode = (v) => {
    const type = v.target.getAttribute('order');
    let url = '';
    if (type === '1') url = 'https://console.amap.com/dev/key/app';
    if (type === '2') url = 'https://lbs.amap.com/api/jsapi-v2/guide/map/map-style';
    if (type === '3') url = 'https://geohub.amap.com/mapstyle/index';
    window.open(url);
  };
  // 处理高德内容
  const gaodeInputChange = (v) => {
    const changeKey = v.target.id;
    if (changeKey === 'key') setGaodeKey(v.target.value);
    if (changeKey === 'jscode') setGaodeJsCode(v.target.value);
    if (changeKey === 'style') setGaodeStyle(v.target.value);
  };
  // 检查是否修改过
  const isChange = () => {
    // eslint-disable-next-line no-unused-vars
    const [type = '', key = '', jsCode = '', style = ''] = value.split(',');
    if (key !== gaodeKey) return true;
    if (jsCode !== gaodeJsCode) return true;
    if (style !== gaodeStyle) return true;
    return false;
  };
  // 保存高德配置
  const saveGaodeConfig = () => {
    if (!gaodeKey) {
      message.error('保存失败：【key】不能为空');
      return false;
    }
    if (gaodeKey.length < 32) {
      message.error('保存失败：请输入正确的【key】');
      return false;
    }
    if (!gaodeJsCode) {
      message.error('保存失败：【安全密钥】不能为空');
      return false;
    }
    if (gaodeJsCode.length < 32) {
      message.error('保存失败：请输入正确的【安全密钥】');
      return false;
    }
    if (!gaodeStyle) {
      message.error('保存失败：【样式】不能为空');
      return false;
    }
    if (!verifyGaode(gaodeStyle)) {
      message.error('保存失败：请输入正确的【样式】如：amap://styles/normal');
      return false;
    }
    onChange(`${typeKey.gaode},${gaodeKey},${gaodeJsCode},${gaodeStyle}`);
  };

  // 处理选择框内容
  const handleSelectChange = (v) => {
    setSelectValue(v);
    if (v === typeKey.just) {
      inputUrl && onChange(inputUrl);
    } else if (v === typeKey.gaode) {
      gaodeKey && gaodeJsCode && gaodeStyle && onChange(`${typeKey.gaode},${gaodeKey},${gaodeJsCode},${gaodeStyle}`);
    } else {
      onChange(v);
    }
  };

  // 初始化地图类型信息
  useEffect(() => {
    if (verifyJust(value)) {
      setSelectValue(typeKey.just);
      setInputUrl(value);
    } else if (verifyGaode(value)) {
      const [type = '', key = '', jsCode = '', style = ''] = value.split(',');
      setGaodeKey(key);
      setGaodeJsCode(jsCode);
      setGaodeStyle(style);
      setSelectValue(type);
    } else {
      setSelectValue(value);
    }
  }, []);

  return (
    <div>
      <Select value={selectValue} style={{ width: '100%' }} onChange={handleSelectChange}>
        <Option value="tianDi">天地图</Option>
        <Option value="gaode">高德地图</Option>
        <Option value="openStreetMap">OSM地图</Option>
        <Option value="justMap">Just地图</Option>
      </Select>
      {selectValue === typeKey.just && <Input value={inputUrl} placeholder="请设置Just分享地址" onChange={justInputChange} autoComplete="off" />}
      {selectValue === typeKey.gaode && (
        <>
          <span className={styled['gaode-content']}>
            <Input id="key" value={gaodeKey} placeholder="请设置高德Key" onChange={gaodeInputChange} autoComplete="off" />
            <span order={1} onClick={openGaode}>
              申请地址
            </span>
            <Input id="jscode" value={gaodeJsCode} placeholder="请设置高德安全密钥" onChange={gaodeInputChange} autoComplete="off" />
            <span order={2} onClick={openGaode}>
              底图样式
            </span>
            <Input id="style" value={gaodeStyle} placeholder="请设置高德样式" onChange={gaodeInputChange} autoComplete="off" />
            <span order={3} onClick={openGaode}>
              自定义样式
            </span>
          </span>
          <div className={styled.buttonStyle} onClick={saveGaodeConfig}>
            <div>保存</div>
            {isChange() ? <div className={styled['is-change']}>*</div> : ''}
          </div>
        </>
      )}
    </div>
  );
}
export default memo(SelectMap);
